<!DOCTYPE html>
<html>
<head>

    <title>Demo Chat</title>

    <link href="bootstrap.css" rel="stylesheet">

    <style>
        body {
            padding: 20px;
        }

        .console {
            height: 400px;
            overflow: auto;
        }

        .username-msg {
            color: orange;
        }

        .connect-msg {
            color: green;
        }

        .disconnect-msg {
            color: red;
        }

        .send-msg {
            color: #888
        }
    </style>


    <script src="js/socket.io/socket.io.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script>

        var userName1 = 'user1_' + Math.floor((Math.random() * 1000) + 1);
        var userName2 = 'user2_' + Math.floor((Math.random() * 1000) + 1);

        var chat1Socket = io.connect('http://localhost:9092/chat1');
        var chat2Socket = io.connect('http://localhost:9092/chat2');

        function connectHandler(parentId) {
            return function () {
                output('<span class="connect-msg">Client has connected to the server!</span>', parentId);
            }
        }

        function messageHandler(parentId) {
            return function (data) {
                output('<span class="username-msg">' + data.userName + ':</span> ' + data.message, parentId);
            }
        }

        function disconnectHandler(parentId) {
            return function () {
                output('<span class="disconnect-msg">The client has disconnected!</span>', parentId);
            }
        }

        function sendMessageHandler(parentId, userName, chatSocket) {
            var message = $(parentId + ' .msg').val();
            $(parentId + ' .msg').val('');

            var jsonObject = {
                '@class': 'com.corundumstudio.socketio.demo.ChatObject',
                userName: userName,
                message: message
            };
            chatSocket.json.send(jsonObject);
        }


        chat1Socket.on('connect', connectHandler('#chat1'));
        chat2Socket.on('connect', connectHandler('#chat2'));

        chat1Socket.on('message', messageHandler('#chat1'));
        chat2Socket.on('message', messageHandler('#chat2'));

        chat1Socket.on('disconnect', disconnectHandler('#chat1'));
        chat2Socket.on('disconnect', disconnectHandler('#chat2'));

        function sendDisconnect1() {
            chat1Socket.disconnect();
        }

        function sendDisconnect2() {
            chat2Socket.disconnect();
        }

        function sendMessage1() {
            sendMessageHandler('#chat1', userName1, chat1Socket);
        }

        function sendMessage2() {
            sendMessageHandler('#chat2', userName2, chat2Socket);
        }


        function output(message, parentId) {
            var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
            var element = $("<div>" + currentTime + " " + message + "</div>");
            $(parentId + ' .console').prepend(element);
        }

        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                $('#send').click();
            }
        });
    </script>
</head>

<body>

<h1>Namespaces demo chat</h1>

<br/>

<div id="chat1" style="width: 49%; float: left;">
    <h4>chat1</h4>
    <div class="console well">
    </div>

    <form class="well form-inline" onsubmit="return false;">
        <input class="msg input-xlarge" type="text" placeholder="Type something..."/>
        <button type="button" onClick="sendMessage1()" class="btn" id="send1">Send</button>
        <button type="button" onClick="sendDisconnect1()" class="btn">Disconnect</button>
    </form>
</div>

<div id="chat2" style="width: 49%; float: right;">
    <h4>chat2</h4>
    <div class="console well">
    </div>

    <form class="well form-inline" onsubmit="return false;">
        <input class="msg input-xlarge" type="text" placeholder="Type something..."/>
        <button type="button" onClick="sendMessage2()" class="btn" id="send2">Send</button>
        <button type="button" onClick="sendDisconnect2()" class="btn">Disconnect</button>
    </form>
</div>


</body>

</html>
